<template>
	<view class="pay-view">
		<view class="pay-price">
			<view class="price-desc">
				{{$t("selectPay.hint1")}}
			</view>
			<view class="price">
				$ {{price}}
			</view>
		</view>

		<view class="select-pay">
			<view class="select-desc">
				{{$t("selectPay.hint2")}}
			</view>

			<view class="confirm-pay" @tap="current = index" v-for="(item, index) in payList" :key="item.id">
				<view class="confirm-left">
					<image :src="item.img" mode="aspectFit"></image>
					<view class="confirm-desc">
						{{item.name}}
					</view>
				</view>
				<view class="confirm-right">
					<image v-if="current === index" src="../../static/icon/image_32.png" mode=""></image>
					<image v-else src="../../static/icon/image_90.png" mode=""></image>
				</view>
			</view>
		</view>

		<view class="pay-btn" @tap="goPay">
			{{$t("selectPay.payBtn")}}
		</view>
	</view>
</template>

<script>
	import {
		goPaypal,
		goPaypalAPP,
		checkPaypalAPP,
		getUserCid
	} from "@/common/api.js"
	import {
		API_URL
	} from "@/env.js"

	export default {
		data() {
			return {
				current: 0,
				payList: [
					// {
					// 	id: 1,
					// 	img: "../../static/icon/zfb.png",
					// 	name: this.$t("selectPay.aliPay")
					// },
					// {
					// 	id: 2,
					// 	img: "../../static/icon/wx.png",
					// 	name: this.$t("selectPay.wechatPay")
					// },
					{
						id: 3,
						img: "../../static/icon/paypal.png",
						name: this.$t("selectPay.paypal")
					},
					// {
					// 	id: 4,
					// 	img: "../../static/icon/ca.png",
					// 	name: this.$t("selectPay.card")
					// },
					// {
					// 	id: 5,
					// 	img: "../../static/icon/apple.png",
					// 	name: this.$t("selectPay.apple")
					// }
				],
				goodsDetail: null,
				price: null,
				selectOrder: null,
				isClick: true
			}
		},
		methods: {
			async goPay() {
				if(!this.isClick) return
				this.isClick = false;
				// console.log(this.current);
        console.log(111)
				if (this.current === 3) {
					uni.navigateTo({
						url: `/pages/card/card?item=${encodeURIComponent(JSON.stringify(this.goodsDetail))}&price=${this.price}&orderId=${this.orderId}&selectOrder=${this.selectOrder}`,
					})
				}

				if (this.current === 0) {
					const apiSplit = API_URL.split(":");
					console.log(apiSplit);
					let url = null;
					if (apiSplit[0] == "http") {
						url = "http://192.168.1.106:8080"
					} else {
						url = "https://www.morebag.com.au"
					}


					// console.log(`${url}/pages/payCancel/payCancel`);
					// return
					// #ifdef H5
					const orderInfo = {
						"total": this.price,
						"currency": "AUD",
						"method": "paypal",
						"intent": "order",
						"description": uni.getStorageSync("userInfo").userName + "订单的付款",
						"cancelUrl": `https://app.morebag.com.au/pages/payCancel/payCancel`,
						"successUrl": `https://app.morebag.com.au/pages/paySuccess/paySuccess`,
						//     "cancelUrl": `https://www.morebag.com.au/#/pages/payCancel/payCancel`,
						//     "successUrl": `https://www.morebag.com.au/#/pages/paySuccess/paySuccess`,
						"orderId": this.orderId
					}
					const res = await goPaypal(orderInfo);
					console.log(res);
					if (res) {
						uni.navigateTo({
							url: `/pages/paypal/paypal?url=${encodeURIComponent(JSON.stringify(res))}`,
							successUrl(res) {
								console.log(res)
							},
							fail(res) {
								console.log(res)
							}
						}, )
					}
					// #endif
					// #ifdef APP

					const orderInfo = {
						"total": this.price,
						"currency": "AUD",
						"method": "paypal",
						"intent": "order",
						"description": uni.getStorageSync("userInfo").userName + "订单的付款",
						"cancelUrl": `https://app.morebag.com.au/pages/payCancel/payCancel`,
						"successUrl": `https://app.morebag.com.au/pages/paySuccess/paySuccess`,
						//     "cancelUrl": `https://www.morebag.com.au/#/pages/payCancel/payCancel`,
						//     "successUrl": `https://www.morebag.com.au/#/pages/paySuccess/paySuccess`,
						"orderId": this.orderId
					}
					const res = await goPaypalAPP(orderInfo);
					console.log(res);
					if (res) {
						const orderInfo2 = {
							// "total": this.price,
							"clientId": "ASdaccokJ2a1Juqe7WcTxGiyXWrjDasP74L_NHPnfa4BJpyyrKa96nIxvG7RSgyXETxFFC-PZy1WmrmS", //开发者中心clientId
							"currency": "AUD",
							"userAction": "continue", //  paynow/continue
							//     "description": uni.getStorageSync("userInfo").userName+"订单的付款",
							"environment": "sandbox",
							//     "cancelUrl": `https://www.morebag.com.au/#/pages/payCancel/payCancel`,
							//     "successUrl": `https://www.morebag.com.au/#/pages/paySuccess/paySuccess`,
							"orderId": res
						}
						console.log(orderInfo2);
						uni.getProvider({
							service: 'payment',
							success: function(res) {
								console.log(res.provider)
								if (~res.provider.indexOf('paypal')) {
									uni.requestPayment({
										"provider": "paypal",
										"orderInfo": orderInfo2,
										success: async function(res) {
											var rawdata = JSON.parse(res.rawdata);
											console.log("orderId：" + rawdata.orderId);
											console.log(rawdata.orderId, uni.getStorageSync(
												"orderId"));
											const res1 = await checkPaypalAPP({
												paymentId: rawdata.orderId,
												orderId: uni.getStorageSync("orderId")
											});
											console.log(res1);

											const resCid = await getUserCid(res1.addUserId);
											const resCid2 = await getUserCid(res1.outUserId);
											console.log(resCid.data.cid, resCid2.data.cid, resCid);
											uni.redirectTo({
												url: `/pages/paySuccess/paySuccess?cid1=${resCid.data.cid}&cid2=${resCid2.data.cid}`
											})
										},
										fail: function(err) {
											console.log('fail:' + JSON.stringify(err));
										}
									});
								}
							}
						});
					}

					// #endif
				}
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("selectPay.title")
			});
		},
		onLoad(option) {
			this.goodsDetail = JSON.parse(decodeURIComponent(option.item));
			this.price = option.price;
			this.orderId = option.orderId;
			uni.setStorageSync("orderId", this.orderId)
			this.selectOrder = option.selectOrder;
			console.log(this.goodsDetail, this.price, this.orderId);
		}
	}
</script>

<style>
	page {
		background-color: #FBFBFB;
	}
</style>
<style lang="scss" scoped>
	.pay-view {
		padding: 20rpx 24rpx;
		box-sizing: border-box;
	}

	.pay-price {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 16rpx 0rpx #00000019;

		.price-desc {
			color: #000000;
			font-family: Inter;
			font-weight: bold;
			font-size: 30rpx;
		}

		.price {
			color: #FF0000;
			font-family: Inter;
			font-weight: regular;
			font-size: 36rpx;
			font-weight: bold;
		}
	}

	.select-pay {
		border-radius: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 16rpx 0rpx #00000019;
		padding-top: 30rpx;
		padding-left: 40rpx;
		padding-right: 50rpx;
		color: #000000;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		line-height: 70rpx;
		margin-top: 36rpx;

		.confirm-pay:last-child {
			border: none;
		}

		.confirm-pay {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			height: 80rpx;
			border-bottom: 2rpx dashed #858585;

			.confirm-left {
				display: flex;
				align-items: center;

				image {
					width: 100rpx;
					height: 45rpx;
				}

				.confirm-desc {
					margin-left: 20rpx;
				}
			}

			.confirm-right {
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}

	.pay-btn {
		border-radius: 20rpx;
		background: #000000;
		height: 88rpx;
		color: #FFFFFF;
		text-shadow: 0rpx 8rpx 8rpx 0rpx #0000003F;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		line-height: 88rpx;
		text-align: center;
		margin-top: 40rpx;
	}
</style>
